<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能配方审核系统</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
  </head>

  <body>
    <header>
      <!-- 显示时间和日期 -->
      <div id="time">
        <div id="time_left">15:04:22</div>
        <div id="time_right">2023-11-23 星期一</div>
      </div>
      <!-- 项目名称 -->
      <div id="title">智能配方审核系统</div>
      <!-- 用户区域 -->
      <div id="user">
        <div id="user_name">
          <p>请扫码登录！</p>
        </div>
        <button id="btn_history">查看历史</button>
        <button id="btn_close">设置关机</button>
      </div>
    </header>
    <section class="mainbox">
      <div class="column1">
        <div class="panel inputInfo">
          <div class="panel_tips">录入信息</div>
          <div id="panel_code">
            扫码 <input type="text" class="input_control" />
          </div>
        </div>
        <div class="panel patientInfo">
          <div class="panel_tips">患者信息</div>
          <div class="panel_info">
            <div id="tableList">
              <div class="tableList_item odd">
                <div class="tableList_name">单号</div>
                <div class="tableList_value">123</div>
              </div>
              <div class="tableList_item even">
                <div class="tableList_name">处方号</div>
                <div class="tableList_value">321</div>
              </div>
              <div class="tableList_item odd">
                <div class="tableList_name">医院</div>
                <div class="tableList_value">北京市昌平医院</div>
              </div>
              <div class="tableList_item even">
                <div class="tableList_name">代煎/代配</div>
                <div class="tableList_value">代配</div>
              </div>
              <div class="tableList_item odd">
                <div class="tableList_name">包数</div>
                <div class="tableList_value">18</div>
              </div>
              <div class="tableList_item even">
                <div class="tableList_name">包装量</div>
                <div class="tableList_value">58</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel tips">
          <div class="panel_tips">提示</div>
          <div id="prompt_content">暂无提示信息!</div>
        </div>
      </div>
      <div class="column2">
        <div class="area_video">
          <!-- 4个角变粗 -->
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <!-- 摄像显示区域 -->
          <div id="video_show">
            <div id="cameraDiv">
              <!-- 视频流 -->
              <video id="video" autoplay></video>
              <!--描绘video截图-->
              <!-- <canvas id="canvas" width="1920" height="1080"></canvas> -->
            </div>
            <!-- 遮罩 -->
            <div id="cover">
              <div id="cover_tips">摄像头预览区域</div>
              <div id="cover_nums">1/14</div>
            </div>
          </div>
          <!-- 照片，拍照点击区域 -->
          <div id="video_function">
            <!-- 轮播图 -->
            <div class="swiper-father">
              <!-- 轮播图 -->
              <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img src="res/OIP-C (1).jpg" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="res/OIP-C (2).jpg" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="res/OIP-C (3).jpg" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="res/OIP-C (4).jpg" alt="" />
                  </div>
                  <div class="swiper-slide">
                    <img src="res/OIP-C.jpg" alt="" />
                  </div>
                </div>
              </div>
              <!-- 上下翻页导航 -->
              <!-- <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div> -->
            </div>
            <!-- 小圆点导航 -->
            <!-- <div class="swiper-pagination"></div> -->
            <div id="line"></div>
            <!-- 拍照点击 -->
            <div id="takephone_area">
              <img src="images/photo_btn.png" alt="" id="btn_takephone" />
            </div>
          </div>
        </div>
      </div>
      <div class="column3">
        <div class="panel dayInfo">
          <div class="panel_tips">当日信息</div>
          <div id="curday_info_content"></div>
        </div>
        <div class="panel weight">
          <div class="panel_tips">称重</div>
          <div id="weigh_info_content">
            <!-- 总应重 -->
            <div class="weigh_info_content_list">
              <div class="weigh_info_content_icon icon1"></div>
              <div class="weigh_info_content_word word1">
                <p>总应重(克)</p>
                <p>2,888</p>
              </div>
            </div>
            <!-- 当前药品重量 -->
            <div class="weigh_info_content_list">
              <div class="weigh_info_content_icon icon2"></div>
              <div class="weigh_info_content_word word2">
                <p>当前药品总量(克)</p>
                <p>2,888</p>
              </div>
            </div>
            <!-- 总误差 -->
            <div class="weigh_info_content_list">
              <div class="weigh_info_content_icon icon3"></div>
              <div class="weigh_info_content_word word3">
                <p>总误差(克)</p>
                <p>2,888</p>
              </div>
            </div>
            <!-- 总实重 -->
            <div class="weigh_info_content_list">
              <div class="weigh_info_content_icon icon4"></div>
              <div class="weigh_info_content_word word4">
                <p>总实重(克)</p>
                <p>2,888</p>
              </div>
            </div>
          </div>
        </div>
        <div class="panel deployment_statue">
          <div class="panel_tips">调配单状态</div>
          <div id="deployment_statue_content">
            <div id="btn_ok"></div>
            <div id="btn_cancel"></div>
          </div>
        </div>
      </div>
    </section>
    <!-- 公司信息 -->
    <div id="footer_company">技术支持：北京东华原医疗设备有限公司</div>
    <!-- 遮罩弹窗 -->
    <div class="cover_main">
      <div id="cover_medince">
        <div id="prePage"></div>
        <div id="page_info">
          <div id="page_info_top"></div>
          <div id="page_info_mid">
            <img
              src="res/home_defautl.png"
              alt="暂无数据"
              id="page_info_mid_img"
            />
          </div>
          <div id="page_info_bottom">
            <button>删除</button>
            <button id="btn_closeMask">关闭</button>
          </div>
        </div>
        <div id="nextPage"></div>
      </div>
    </div>
    <div class="cover_cover"></div>
  </body>
</html>

<!-- echart图表JS -->
<script>
  //当日信息
  var colorlist = ["#129BFF", "#FFCF5F"];
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("curday_info_content"));
  // 指定图表的配置项和数据
  option = {
    color: colorlist,
    title: {
      show: true,
      text: "总处方",
      top: "40%",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 28,
        fontWeight: "bold",
      },
    },
    legend: {
      top: "50%",
      right: "50px",
      orient: "vertical",
      icon: "circle",
    },
    grid: {
      left: "10%",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "80%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "inside",
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 28,
            name: "当日通过",
          },
          {
            value: 72,
            name: "当日拒绝",
          },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  //自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
  myChart.resize();
</script>

<!-- swiper滑动窗口 -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3.5,
    spaceBetween: 30,
    loop: true,
    // keyboard: {
    //   enabled: true,
    // },
    // 原点导航
    // pagination: {
    //   el: ".swiper-pagination",
    //   clickable: true,
    // },
    //上下翻页导航
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>

<!-- 摄影拍照功能函数 -->

<script type="text/javascript">
  //访问用户媒体设备的兼容方法
  function getUserMedia(constrains, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
      //最新标准API
      navigator.mediaDevices
        .getUserMedia(constrains)
        .then(success)
        .catch(error);
    } else if (navigator.webkitGetUserMedia) {
      //webkit内核浏览器
      navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia) {
      //Firefox浏览器
      navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia) {
      //旧版API
      navigator.getUserMedia(constrains).then(success).catch(error);
    } else {
      alert("不支持的浏览器");
    }
  }
  //成功的回调函数
  function success(stream) {
    //兼容webkit内核浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    try {
      video.srcObject = stream;
    } catch (e) {
      video.src = CompatibleURL.createObjectURL(stream);
    }
    //播放视频
    video.play();
  }
  //异常的回调函数
  function error(error) {
    alert("访问用户媒体设备失败," + error.name + "" + error.message);
  }

  /**
   * 获取当前静态页面的参数
   * 返回值和使用方法类似java request的getparamater
   * 不同: 当取得的为数组(length>1)时调用toString()返回(逗号分隔每个元素)
   * @param {Object} name
   * @return {TypeName}
   */
  function getPara(name, search) {
    var p = getParas(name, search);
    if (p.length == 0) {
      return null;
    } else if (p.length == 1) {
      return p[0];
    } else {
      return p.toString();
    }
  }

  /**获取当前静态页面的参数
   * 返回值和使用方法类似java request的getparamaterValues
   * @param {Object} name 要取出的参数名,可以在参数字符串中重复出现
   * @param {Object} search 手工指定要解析的参数字符串,默认为当前页面后跟的参数
   * @return {TypeName}
   */
  function getParas(name, search) {
    if (!search) {
      search = window.location.search.substr(1); //1.html?a=1&b=2
    }
    var para = [];
    var pairs = search.split("&"); //a=1&b=2&b=2&c=2&b=2
    for (var i = 0; i < pairs.length; i = i + 1) {
      var sign = pairs[i].indexOf("=");
      if (sign == -1) {
        //如果没有找到=号，那么就跳过，跳到下一个字符串（下一个循环）。
        continue;
      }
      var aKey = pairs[i].substring(0, sign);
      if (aKey == name) {
        para.push(unescape(pairs[i].substring(sign + 1)));
      }
    }
    return para;
  }
  //开启摄像头
  function captureInit() {
    if (
      (navigator.mediaDevices != undefined &&
        navigator.mediaDevices.getUserMedia != undefined) ||
      navigator.getUserMedia != undefined ||
      navigator.webkitGetUserMedia != undefined ||
      navigator.mozGetUserMedia != undefined
    ) {
      //   document.getElementById("help").style.display = "none";
      //调用用户媒体设备，访问摄像头,改为触发事件
      getUserMedia(
        {
          video: {
            width: imgWidth,
            height: imgHeight,
          },
        },
        success,
        error
      );
      if (captureState == 0) {
        captureState = 1; //标记此按钮已点击
      }
    } else {
      captureState = 0; //异常标识按钮没点
      alert(
        "你的浏览器不支持访问用户媒体设备或访问地址不是https开头,您可以点击右侧下载解决方案"
      );
      //   document.getElementById("help").style.display = "inline-block";
    }
  }
  //注册拍照按钮的单击事件
  function capture() {
    //绘制画面
    if (captureState == 0) {
      alert("请先开启摄像头");
      return;
    }
    context.drawImage(video, 0, 0, imgWidth, imgHeight); //后面两个长宽
    //canvas.toDataURL("image/png");//即可得到base64编码
    captureState = 2;
  }
  //确认按钮返回给父页面的函数
  function queren() {
    if (captureState != 2) {
      alert("请先开启摄像头并拍照");
      return;
    }
    var base64 = canvas.toDataURL("image/jpeg");
    var pics = {};
    pics.filetypeid = filetypeid; //返回给前端
    pics.base64 = base64;
    if (window.opener) {
      window.opener[cb](pics); // /FileUploadTmp/为项目临时文件夹相对路径
      window.close();
    } else if (window.parent) {
      window.parent[cb](pics);
      window.parent.$("#dialog_ifr_html").dialog("close"); //close会导致flash未执行完就销毁,页面JS报错
    } else {
      window.close();
    }
  }
</script>

<!-- 摄像区域点击事件 -->
<script>
  $("#cameraDiv").click(function () {
    $("#home_default").hide();
    $("#video").show();
    captureInit();
  });
</script>

<!-- 初始化摄影区参数 -->
<script type="text/javascript">
  var cb = getPara("cb") || "setImg";
  var filetypeid = getPara("filetypeid") || "filetypeid"; //附件类型id
  var video = document.getElementById("video");
  // var canvas = document.getElementById("canvas");
  // var context = canvas.getContext("2d");
  var imgWidth = $("#cameraDiv").width() || "1920";
  var imgHeight = $("#cameraDiv").height() || "1080";
  // var imgWidth = getPara("width") || "1920";//这个值div的宽一致
  // var imgHeight = getPara("height") || "1080";//这个值div的高一致
  var captureState = 0; //未开启,1已开启,2已拍照,为2才可点击确认按钮
  var style = getPara("style") || "big-btn-blue";
  video.style.width = imgWidth;
  video.style.height = imgHeight;
  // var st = style.split(",");
  //   document.getElementById("init").className = st[0];
  //   document.getElementById("capture").className = st[1] || st[0];
  //   document.getElementById("queren").className = st[2] || st[0];
  //   document.getElementById("help").className = st[3] || st[0];
</script>

<!-- 遮罩效果 -->
<script type="text/javascript">
  //界面加载时执行
  window.onload = () => {
    $(".cover_main").hide();
    $(".cover_cover").hide();
  };

  $(function () {
    $(".cover_cover").click(function () {
      showMask(false);
    });
  });

  function showMask(isShow) {
    var winW = $(window).width();
    var winH = $(window).height();
    $(".cover_cover").css("width", winW + "px");
    $(".cover_cover").css("height", winH + "px");
    $(".cover_cover").css("background", "gray");
    if (isShow) {
      $(".cover_main").show();
      $(".cover_cover").show();
    } else {
      $(".cover_main").hide();
      $(".cover_cover").hide();
    }
  }

  function adjust() {
    //取得当前宽度和高度
    var w = $(".cover_main").css("width").replace(/px/g, "");
    var h = $(".cover_main").css("height").replace(/px/g, "");
    //定位这个盒子，相对于窗口垂直居中
    var winW = $(window).width();
    var winH = $(window).height();
    var top = winH / 2 - h / 2;
    top = top < 0 ? 0 : top;
    var left = winW / 2 - w / 2;
    left = left < 0 ? 0 : left;
    //遮罩层
    showMask(true);
    $(".cover_main").css("top", top + "px");
    $(".cover_main").css("left", left + "px");
    $(".cover_main").css("z-index", "9");
  }

  function adjustAuto() {
    //取得当前宽度和高度
    var w = $(".cover_main").css("width").replace(/px/g, "");
    var h = $(".cover_main").css("height").replace(/px/g, "");
    //定位这个盒子，相对于窗口垂直居中
    var winW = $(window).width();
    var winH = $(window).height();
    var top = winH / 2 - h / 2;
    top = top < 0 ? 0 : top;
    var left = winW / 2 - w / 2;
    left = left < 0 ? 0 : left;
    //遮罩层
    $(".cover_main").css("top", top + "px");
    $(".cover_main").css("left", left + "px");
    $(".cover_main").css("z-index", "9");
  }

  //遮罩弹窗自适应
  window.addEventListener("resize", function () {
    adjustAuto();
  });
</script>

<!-- 按钮点击事件 -->
<script>
  $(document).ready(function () {
    // 通过按钮
    $("#btn_ok").mousedown(function () {
      var okImgActive = "images/pass_btn_active.png"; //ok点击后图片路径
      $("#btn_ok").css("background-image", "url(" + okImgActive + ")");
    });
    $("#btn_ok").mouseup(function () {
      var okImg = "images/pass_btn.png"; //ok点击后图片路径
      $("#btn_ok").css("background-image", "url(" + okImg + ")");
    });

    //拒绝按钮
    $("#btn_cancel").mousedown(function () {
      var btn_cancelAction = "images/reject_btn_active.png"; //ok点击后图片路径
      $("#btn_cancel").css("background-image", "url(" + btn_cancelAction + ")");
    });
    $("#btn_cancel").mouseup(function () {
      var btn_cancel = "images/reject_btn.png"; //ok点击后图片路径
      $("#btn_cancel").css("background-image", "url(" + btn_cancel + ")");
    });
    //查看历史
    $("#btn_history").mousedown(function () {
      var btn_historyAction = "images/home_top_btn_active.png"; //ok点击后图片路径
      $("#btn_history").css(
        "background-image",
        "url(" + btn_historyAction + ")"
      );
    });
    $("#btn_history").mouseup(function () {
      var btn_history = "images/home_top_btn.png"; //ok点击后图片路径
      $("#btn_history").css("background-image", "url(" + btn_history + ")");
    });
    // 设置关机
    $("#btn_close").mousedown(function () {
      var btn_closeAction = "images/home_top_btn_active.png";
      $("#btn_close").css("background-image", "url(" + btn_closeAction + ")");
    });
    $("#btn_close").mouseup(function () {
      var btn_close = "images/home_top_btn.png";
      $("#btn_close").css("background-image", "url(" + btn_close + ")");
    });

    //点击拍照
    $("#btn_takephone").mousedown(function () {
      var takephoneActive = "images/photo_btn_active.png";
      $("#btn_takephone").attr("src", takephoneActive);
    });
    $("#btn_takephone").mouseup(function () {
      var takephone = "images/photo_btn.png";
      $("#btn_takephone").attr("src", takephone);
    });

    //点击上一页
    $("#prePage").mousedown(function () {
      var prePageActive = "images/pre_btn_active.png";
      $("#prePage").css("background-image", "url(" + prePageActive + ")");
    });
    $("#prePage").mouseup(function () {
      var prePage = "images/pre_btn.png";
      $("#prePage").css("background-image", "url(" + prePage + ")");
    });
    //点击下一页
    $("#nextPage").mousedown(function () {
      var nextPageActive = "images/next_btn_active.png";
      $("#nextPage").css("background-image", "url(" + nextPageActive + ")");
    });
    $("#nextPage").mouseup(function () {
      var nextPage = "images/next_btn.png";
      $("#nextPage").css("background-image", "url(" + nextPage + ")");
    });
    //关闭遮罩
    $("#btn_closeMask").click(function () {
      showMask(false);
    });
  });

  //查看历史点击事件
  $("#btn_history").click(function () {});
  //设置关机点击事件
  $("#btn_close").click(function () {});
  //点击拍照点击事件
  $("#btn_takephone").click(function () {});
  //通过按钮点击事件
  $("#btn_ok").click(function () {});
  //拒绝按钮点击事件
  $("#btn_cancel").click(function () {});

  //上一页点击事件
  $("#prePage").click(function () {});
  //下一页点击事件
  $("#nextPage").click(function () {});
</script>

<script>
  function AutoWidth(obj) {
    console.log($(obj));
  }
</script>
